<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set value="<%=request.getContextPath()%>" var="ctx"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <meta name="keywords" content="关键字台">
    <meta name="description" content="描述"> 
    <link href="${ctx}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="${ctx}/css/animate.css" rel="stylesheet">
    <link href="${ctx}/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx}/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet"> 
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <div class="row">
                           <div class="col-sm-12">
                                <h3>扫码信息查询</h3>
                           </div>
                        </div>
                    </div>
                    <div class="ibox-content" id="form" >
                        <form class="form-horizontal m-t" action="getScanInfo" method="post" name="scanform" id="scanform" onkeydown="if(event.keyCode==13)return false;">
                            <div class="row">
                            <div class="col-sm-2"></div>
                            <div class="col-sm-8">
                            
                            
                            		<div class="form-group">
                                        <label class="col-sm-4 control-label"><span class="text-danger">*</span>查询代码：</label>
                                        <div class="col-sm-5">
                                            <input class="form-control" type="text" name="desc" id="desc" maxlength="10" />
                                        </div>
                                        <span class="help-block m-b-none"><i class="fa fa-info-circle"></i>示例：A123456789</span>
                                    </div>
                            		
                                  
                                    
                                    
                                    <div class="form-group">
                                        <div class="col-sm-8 col-sm-offset-4">
                                            <button class="btn btn-primary" id="createBtn" type="button" onclick="config();return false;">&#8195;查询&#8195;</button>                                            
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-2"></div>
                            </div>
                        </form>
                    </div>
                    
                    
                    
                    <div class="ibox-content" id="userDiv" style="display:none">
                    	<div class="col-sm-12" >
                               <h3 id="msg">扫码记录</h3>
                          </div>
                        <table class="table table-bordered table-hover text-center dataTables-example" id="table">
                            <thead>
                                <tr>
                                    <th class="text-center">序号</th>
                                    <th class="text-center">头像</th>
                                    <th class="text-center">昵称</th>
                                    <th class="text-center">性别</th>
                                    <th class="text-center">扫码地点</th>
                                    <th class="text-center">扫码时间</th>
                                </tr>
                            </thead>
                            <tbody>                             
                            </tbody>
                        </table>
                    </div>
                    
                </div>
                <div id="loading" style="display:none">
	                <div class="sk-spinner sk-spinner-wave" style="width: 100%;text-align: center;display:-webkit-box;-webkit-box-orient: horizontal;-webkit-box-pack: center;-webkit-box-align: center; " >
	                    <div class="sk-rect1"></div>
	                    <div class="sk-rect2"></div>
	                    <div class="sk-rect3"></div>
	                    <div class="sk-rect4"></div>
	                    <div class="sk-rect5"></div>
	                    <span style="display:block;margin-left: 5px;">正在查询中....</span>
	                </div>
                </div>
            </div>
        </div>
    </div>
    
    
    
 
    
    
    
    <!-- 全局js -->
    <script src="${ctx}/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx}/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="${ctx}/js/content.js?v=1.0.0"></script>
    <!-- jQuery Validation plugin javascript-->
    <script src="${ctx}/js/plugins/validate/jquery.validate.min.js"></script>
    <script src="${ctx}/js/plugins/validate/messages_zh.min.js"></script>
    <script src="${ctx}/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="${ctx}/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<%--     <script src="${ctx}/js/demo/form-validate-demo.js"></script> --%>
    <script src="${ctx}/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx}/js/qrcode/Math.uuid.js"></script>
   	<script type="text/javascript">
		var ctx = "${ctx}";
		$(function(){
			 $("#scanform").validate({
					rules : {
						desc:{
							required : true, 
						}
					},
					messages : {
						desc:{
							required : "请输入查询代码",
						}
					}
				});
		});
		
		function config(){
			if(!$("#scanform").valid()){
				return;
			}	
			$("#createBtn").attr("disabled",true);
			$("#userDiv").css("display","none");
			$("#loading").css("display","block");
			
			$.ajax({
				url:"getScanInfo",
				type:"post",
				data:$("#scanform").serialize(),
				success:function(data){
					$("#createBtn").attr("disabled",false);
					$("#loading").css("display","none");
					layer.msg(data.message);
					if(data.state == 1){
						$("#userDiv").html("");
						var list = data.data;
						var str = '<div class="col-sm-12" ><h3>扫码记录</h3></div><table class="table table-bordered table-hover text-center dataTables-example" id="table">'+
						'<thead><tr><th class="text-center">序号</th>'+'<th class="text-center">头像</th><th class="text-center">昵称</th><th class="text-center">性别</th>'+
						'<th class="text-center">扫码地点</th><th class="text-center">扫码时间</th></tr></thead><tbody>';                                                    
						if(list == null){
							return;
						}
						for(var i=0;i<list.length;i++){
							var obj = list[i];
							var head_pic = obj.head_pic!=null?obj.head_pic:"";
							var nick_name = obj.nick_name!=null?obj.nick_name:"";
							var sex = obj.sex=="1"?"男":"女";
							var site = obj.site!=null?obj.site:"";
							var scan_time = obj.scan_time!=null?obj.scan_time:"";
							str += '<tr><td>'+(i+1)+'</td>'
								+ '<td><img alt="image" class="img-circle" src="'+ head_pic+'" style="width:50px;"/></td>'
								+ '<td>'+ nick_name+ '</td>'+ '<td>'+ sex+ '</td>'
								+ '<td>'+  site+ '</td>'+ '<td>'+  scan_time+ '</td>'+ '</tr>';					
						}
						str +='</tbody></table>'
						$("#userDiv").html(str);
						$("#userDiv").css("display","block");
						initTable();
					}
				},
				error:function(data){
					$("#input").attr("disabled",false);
					$("#createBtn").attr("disabled",false);
					$("#loading").css("display","none");
					layer.msg("connection error");
				}
			});		

		}
		
		function initTable() {
			var table = $('#table').dataTable({			        
			 "columnDefs":[{
				 searchable:false,//禁用过滤
	            targets:[0]   //指定的列
	        }],             
			"oLanguage" : { // 汉化
				"sProcessing" : "正在加载数据...",
				"sLengthMenu" : "_MENU_记录/页 ",
				"sZeroRecords" : "没有您要搜索的内容",
				"sInfo" : "_START_ 至 _END_  ，共 _TOTAL_ 项",
				"sInfoEmpty" : "记录数为0",
				"sInfoFiltered" : "(全部记录数 _MAX_  条)",
				"sInfoPostFix" : "",
				"sSearch" : "查找&nbsp;",
				"sUrl" : "",
				"oPaginate" : {
					"sFirst" : "第一页",
					"sPrevious" : " 上一页 ",
					"sNext" : " 下一页 ",
					"sLast" : " 最后一页 "
				}
			}

		});
		/* var tt = new $.fn.dataTable.TableTools( table );	   
	   $( tt.fnContainer() ).insertBefore('div.dataTables_wrapper'); */
	}
	</script>
</body>
</html>
